<template>
  <el-dialog  title="修改菜单" :visible.sync="visible" @close="onClose">
    <el-form :model="formData" ref="form">
      <el-form-item label="菜单ID" :label-width="formLabelWidth" readonly>
        <el-input v-model="formData.menuId" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单名称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.menuName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="父菜单ID" :label-width="formLabelWidth" >
        <el-input v-model="formData.parentId" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="显示顺序" :label-width="formLabelWidth" >
        <el-input v-model="formData.orderNum" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="路由地址" :label-width="formLabelWidth" >
        <el-input v-model="formData.path" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="组件路径" :label-width="formLabelWidth" >
        <el-input v-model="formData.component" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="路由参数" :label-width="formLabelWidth" >
        <el-input v-model="formData.query" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="是否为外链" :label-width="formLabelWidth" >
        <el-input v-model="formData.isFrame" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="是否缓存" :label-width="formLabelWidth" >
        <el-input v-model="formData.isCache" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单类型" :label-width="formLabelWidth" >
        <el-radio-group v-model="formData.menuType" style="width: 100%">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
          <el-radio label="F">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

<!--      <el-form-item label="菜单状态" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.visible" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="菜单状态" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.status" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="权限标识" :label-width="formLabelWidth" >
        <el-input v-model="formData.perms" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单图标" :label-width="formLabelWidth" >
        <el-popover
            placement="bottom-start"
            width="650"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" />
          <el-input slot="reference" v-model="formData.icon" placeholder="点击选择图标" readonly>
            <svg-icon
                v-if="formData.icon"
                slot="prefix"
                :icon-class="formData.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;"
            />
            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
          </el-input>
        </el-popover>
      </el-form-item>

<!--      <el-form-item label="创建者" :label-width="formLabelWidth" readonly>-->
<!--        <el-input v-model="formData.createBy" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->


<!--      <el-form-item label="更新者" :label-width="formLabelWidth" readonly>-->
<!--        <el-input v-model="formData.updateBy" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->


      <el-form-item label="备注" :label-width="formLabelWidth" >
        <el-input v-model="formData.remark" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateSysMenu, getOneSysMenu} from "@/api/sys/menu";
import IconSelect from "@/components/IconSelect";
export default {
  name: 'SysMenuUpdate',
  props: {
    visible: false,
  },
  components: {IconSelect },
  data() {
    return {
      formData: {
        userId: 0,
        userName: '',
        nickName: '',
        password: '',
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    selected(name) {
      this.formData.icon = name;
    },
    loadData(id) {
      if (id > 0) {
        getOneSysMenu(id).then(res => this.formData = res);
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 执行表单提交操作
          // this.formData 包含了通过校验的表单数据
          updateSysMenu(this.formData).then(res => this.$emit('submit-success'));
          this.onClose()
        } else {
          console.log('Form validation failed');
        }
      });
    },
    onClose() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style>
</style>
